import React from 'react';

interface Props {
  href: string;
  children: React.ReactElement | string;
}

export function LinkButton({
  children,
  onClick
}: {
  children: React.ReactElement | string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}) {
  return (
    <button className="appearance-none text-indigo-800  hover:underline" onClick={onClick}>
      {children}
    </button>
  );
}

export function OuterLink({ children, href }: Props) {
  return (
    <LinkButton
      onClick={() => {
        window.location.href = href;
      }}
    >
      {children}
    </LinkButton>
  );
}
